<template>
	<view class="body"> 
		<scroll-view
		 :scroll-y="true" 
		 :scroll-into-view="scrollToView"
		 :show-scrollbar="true"
		 :scroll-with-animation="true" 
		 class="message"
		>
		<view class="list" v-for="(item,index) in message" :key="index">
				<view class="left" v-if="item.id == options.id & item.message != null">
					<view class="user-chat" :id="'msg'+index">
						<view class="left-userimg">
							<u-avatar shape="square" size="35" :src="options.img" fontSize="26"></u-avatar>
						</view>
						<!-- 对话框小样式 -->
						<view class="left-chat-icon">  
						</view> 
						<text class="left-usertext">{{item.message}}</text>
					</view>
				</view>
				<view class="right" v-if="item.id == myuser.id & item.message != null "> 
					<view class="my-chat" :id="'msg'+index">
						<view class="right-userimg">
							<u-avatar  shape="square" size="35" :src="myuser.img" fontSize="26"></u-avatar>
						</view>
						<!-- 对话框小样式 -->
						<view class="right-chat-icon">
						</view>
						<text class="right-usertext">{{item.message}}</text>
					</view> 
				</view>
			</view> 
		</scroll-view>
		<!-- 底部对话框 -->
		<view class="bottom">
			<view class="input">
				<input placeholder="请输入内容"  class="input-input" v-model="value"/>
			</view>
			<button class="myuserbutton" @click="sendmessage">发送</button>
		</view>
	</view>
</template>

<script>
	import emoji from "../../js_sdk/m-emoji/m-emoji_2.0.0/emoji.js";//引入表情库
	export default {
		data() {
			return {
				value:"", 
				options:{ //好友
					id:"",
					name:"",
					img:"",
				},
				myuser:{ //自己
					id:"",
					name:"",
					img:"",
				},
				message:[
					
				],//渲染页面的消息数组
				total:0,//再该页面时收到的消息数，用于退出该页面清楚对应的tabber数量
				scrollToView:"",//滚动
				emojiData:[],//表情库数组
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
			    title: options.name, 
			})
			uni.setNavigationBarColor({
			    frontColor: '#000000', //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
			})
			this.options.id = options.id
			this.options.name = options.name
			this.options.img = options.img
			console.log("options:"+JSON.stringify(this.options))
			const user = JSON.parse(uni.getStorageSync('user'))
			if(user != null){
				this.myuser.id = user.id
				this.myuser.img = user.img
			}
			//从缓存中拿到对应的对话消息
			this.getmessage()
			this.onSystem() //监听在该页面收到的新消息
			//获取表情
			// var page = Math.ceil(emoji.length/21)
			//     for (let i = 0; i < page; i++) {
			//     this.emojiData[i] = [];
			//     for (let k = 0; k < 21; k++) {
			//         emoji[i*21+k]?this.emojiData[i].push(
			//         emoji[i*21+k]
			//         ):''
			//     }
			// } 
			// console.log(this.emojiData[2][2]) 
		},
		//结束
		onUnload(){
			var UserList = JSON.parse(uni.getStorageSync("userfriendlist"))
			for(var i = 0;i< UserList.length;i++){
				if(this.options.id == UserList[i].id){
					this.$set(UserList[i],"totalMessage",0) 
					//更新缓存
					var str = UserList
					uni.setStorageSync("userfriendlist",JSON.stringify(str))
					this.$forceUpdate()
					break
				}
			} 
			//设置tabbar的值
			var str = uni.getStorageSync("tabbar")
			if(str != "null"){
				var a = parseInt(str)
				a = a - this.total
				uni.setStorageSync("tabbar",JSON.stringify(a))
			}
		},
		methods: {
			//监听接收消息方法
			onSystem(){ 
				uni.$on("system",res=>{
					//将消息添加到本页面消息数组
					if(res.sendUser == this.options.id){ 
						var a = { //封装用于页面渲染的对象
							id:"",
							message:"",  
						}
						a.id = res.sendUser
						a.message = res.message
						this.message.push(a)
					}
					this.total += 1
					this.end()
				})
			},
			//获取缓存消息
			getmessage(){
				var mage = uni.getStorageSync("message")
				if(typeof mage == 'string' & mage.length > 0){
					var me = JSON.parse(mage)
					for (var i = 0;i<me.length;i++) {
						//好友消息
						if(me[i].sendUser == this.options.id & me[i].receiveUser == this.myuser.id){
							var a = { //封装用于页面渲染的对象
								id:"",
								message:"", 
							}
							a.id = me[i].sendUser
							a.message = me[i].message
							this.message.push(a)
							continue
						}else if(me[i].sendUser == this.myuser.id & me[i].receiveUser == this.options.id){
							var a = { //封装用于页面渲染的对象
								id:"",
								message:"", 
							}
							a.id = me[i].sendUser
							a.message = me[i].message
							this.message.push(a)
							continue
						}
					}
				}
			},
			//发送消息
			sendmessage(){
				var se = {
					sendUser:"",//发送用户
					receiveUser:"", //接收用户id
					message:"",//发送的信息
					isSystem:0
				}
					se.sendUser=this.myuser.id 
					se.receiveUser= this.options.id
					se.message = this.value
					var str = JSON.stringify(se)//封装好要发送的消息
					//发送信息时对websoket校验，为空的话重连soket
					if(this.$wt.socketTask == null){
						this.$wt.init(this.myuser.id)
						this.sendmessage() 
					}else{
						//为什么要等一秒,因为给重连ping腾出时间才能发送成功消息。
						setTimeout(()=>{
							var mge = uni.getStorageSync("message")
							if(typeof mge == 'string' && mge.length > 0){
								var m = JSON.parse(mge)  
								m.push(se)
								uni.setStorageSync("message",JSON.stringify(m))
							}else{//首次的情况
								var m = []
								m.push(se)
								uni.setStorageSync("message",JSON.stringify(m))
							}
							this.$wt.send(str)  
						}, 1000); 
					}
					 //将用户发送的信息添加到消息数组里
					 var a = {
					 	id:"",
					 	message:""
					 }
					 a.id = this.myuser.id
					 a.message = this.value  
					 this.message.push(a)
					 this.value = null //置空输入框 
					 this.end()
			},
			//发送接收消息滚动到底部
			end(){
				//设置消息滚动到底部
				 this.$nextTick(() => {
				 	//这里将 最后一条聊天的下标'chatItem_' + index 赋值给 刚刚绑定的scrollIntoIndex。这样就可以实现滚动到底部
				 	var num = this.message.length - 1
					console.log("num值是:"+num)
				 	this.scrollToView = 'msg'+ num
					console.log("点击后的id值是："+this.scrollToView)
				});
			}
		}
	}
</script>

<style>
	@import url("@/static/css/chatpage.css");
</style>
